<template>
  <div class="ee-crumbs">
    <template v-for="(item, index) in crumbs" :key="index">
      <router-link v-if="item.to" :to="item.to">
        <slot :item="item" :index="index">
          {{ item.label }}
        </slot>
      </router-link>
      <template v-else>
        <slot :label="item.label" :index="index" :last="index == crumbs.length - 1">
          {{ item.label }}
        </slot>
      </template>
      <template v-if="index != crumbs.length - 1">
        <slot name="split">
          /
        </slot>
      </template>
    </template>
  </div>
</template>

<script type="text/javascript">
/**
 * @typedef {object} crumb
 * @property {string} label - 显示的标签名
 * @property {string} to - 同 router-link 的 to 属性
 */

/**
 * @typedef {object} slotDefault
 * @property {crumb} item - 当前项
 * @property {number} index - 当前项索引
 * @property {boolean} last - 当前项是否是最后一项
 */

/**
 * 插槽
 * @property {slotDefault} default - 一个面包屑
 * @property {} split - 分隔符，默认为 '/'
 */
export default {
  name: "ee-crumb",
  props: {
    /** 面包屑数组
     * @type {crumb[]}
     */
    crumbs: Array,
  },
};
</script>

<style lang="scss" scoped>
.ee-crumbs {
  max-width: 100%;
  display: flex;
  gap: .5em;
}
</style>